<template>
  <div class="login">
    <div class="loginTitle">滨海新区餐厨垃圾收运处理信息化统计监管平台</div>
    <img src="../../assets/login.jpg" alt />
    <div class="loginin">
      <h2>账号登录</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="name">
          <el-input placeholder="请输入内容" v-model="ruleForm.name" clearable></el-input>
          <!-- <el-input type="password" v-model="ruleForm.pass" ></el-input> -->
        </el-form-item>
        <el-form-item label="密码" prop="passwords">
          <el-input type="password" placeholder="请输入密码" v-model="ruleForm.passwords" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="loginAction('ruleForm')"
            @keyup.enter="loginAction('ruleForm')"
            class="submits"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        name: '',
        passwords: ''
      },
      rules: {
        name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        passwords: [{ required: true, validator: validatePass, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created () {
    console.log(this.ruleForm)
  },
  mounted() {
            //http://localhost:8080/#/order/Payresult?orderCode=20200721093517378188743943022
            var url = window.location.href ; //获取url中"?"符后的字串       
            var cs = url.split('?')[1];                //获取?之后的参数字符串
            //alert(url+'地址');//orderCode=20200721093517378188743943022
            var cc ='';
            var cs2 = '';
            if (cs.length > 0)
            {
                cs = cs.replace('orderId=', '');
                var cc =cs.split('&')[0];//获取orderid
                var cs1 = cs.split('&')[1];//ocd=20200818103843816416953617735
                var cs2 = cs1.replace('ocd=', '');//20200818103843816416953617735

                this.submitForm(cc, cs2)
            }
        },
  methods: {
    loginAction () {
      this.submitForm(this.ruleForm.name, this.ruleForm.passwords)
    },
    async submitForm (idLOGIN, pwLOGIN) {
      localStorage.setItem('LOGIN_NAME', idLOGIN)
      await this.$Http.post('/DataListCompany/GetLoginModelBHApi', { user: idLOGIN, pwd: pwLOGIN }, {
        emulateJSON: true
      }).then(res => {
        console.log(res)
        if (res.status === 200) {
          localStorage.setItem('CLIENT_NO', res.data.obj.CLIENT_NO)
          localStorage.setItem('USERNAME', res.data.obj.USERNAME)
          this.$router.push({
            path: '/Monitoring'
          })
          this.$message({ // 提示成功信息
            type: 'success',
            message: '登录成功'
          })
        } else {
          this.$message({ // 提示失败信息
            type: 'error',
            message: '用户名或密码错误!'
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    }
    
  }
}
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
}
.loginTitle {
  /* margin: 1em 0 0.5em 0; */
	font-weight: 600;
	/* text-transform: uppercase; */
	color: #007ACC;
	/* font-style: italic; */
	/* font-family: 'Josefin Sans', sans-serif; */
	font-size: 45px;
	line-height: 54px;
	/* text-shadow: 2px 5px 0 rgba(0,0,0,0.2); */
  text-align: center;
  top: 25%;
  width: 100%;
  height: 100px;
  position: absolute;
  z-index: 2;
}
.login img {
  width: 100%;
  height: 100%;
  position: relative;
}
.loginin h2 {
  padding: 0 0 15px 0;
  color: #26b4ea;
}
.loginin {
  width: 350px;
  height: auto;
  border: 1px solid #b9b9b9;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 10px -10px 10px #888888;
  padding-right: 60px;
  position: absolute;
  top: 55%;
  left: 40%;
}
.submits {
  width: 100%;
}
</style>
